import React from 'react'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import styles from './index.module.less'
import { Image, ImageViewer } from 'antd-mobile'
import { CloseCircleFill } from 'antd-mobile-icons'

type SortableItemProps = {
    item: any
    onRemove: () => void
}

const SortableItem = ({ item, onRemove }: SortableItemProps) => {
    const { id, url } = item || {}
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })

    const style = {
        transform: CSS.Translate.toString(transform),
        transition,
    }
    /** 放大图片 */
    const showImage = () => {
        ImageViewer.show({ image: url })
    }

    return (
        <div ref={setNodeRef} style={style} className={styles.image_wrap}>
            <div {...attributes} {...listeners}>
                <Image src={url} onClick={showImage} />
            </div>
            <CloseCircleFill className={styles.icon} onClick={onRemove} />
        </div>
    )
}

export default SortableItem
